<!--
 * @Author: ZhaoZhiqi
 * @Date: 2024-09-03 16:38:32
 * @LastEditors: ZhaoZhiqi
 * @LastEditTime: 2024-12-02 17:39:48
 * @Description: 个人中心
 * @FilePath: \charging-mini\充电项目\pages\mine.vue
-->
<template>
    <div class="container">
        <HeaderBar>
            <template slot="titleBar">
                <div class="header">个人中心</div>
            </template>
        </HeaderBar>

        <div class="info-container">
            <div class="avatar"></div>
            <div class="info">
                <!-- <div class="name">测试姓名</div> -->
                <div class="phone" @click="toLogin">{{ userInfo.phone || "未登录" }}</div>
            </div>
            <img class="arrow" src="../src/assets/imgs/arrow.png" @click="toLogin" />
        </div>

        <!-- <div class="card">
            <div class="item">
                <img class="icon" src="../src/assets/imgs/privacy.png" alt="" />
                <div class="label">隐私协议</div>
                <div class="input"></div>
                <img class="arrow" src="../src/assets/imgs/arrow.png" alt="" />
            </div>
            <div class="item">
                <img class="icon" src="../src/assets/imgs/privacy.png" alt="" />
                <div class="label">建议反馈</div>
                <div class="input"></div>
                <img class="arrow" src="../src/assets/imgs/arrow.png" alt="" />
            </div>
            <div class="item">
                <img class="icon" src="../src/assets/imgs/customer-service-icon.png" alt="" />
                <div class="label">联系客服</div>
                <div class="input"></div>
                <img class="arrow" src="../src/assets/imgs/arrow.png" alt="" />
            </div>
            <div class="item">
                <img class="icon" src="../src/assets/imgs/qa-icon.png" alt="" />
                <div class="label">常见问题</div>
                <div class="input"></div>
                <img class="arrow" src="../src/assets/imgs/arrow.png" alt="" />
            </div>
        </div> -->

        <div v-if="userInfo && userInfo.token" class="card">
            <div class="item" @click="link('/pages/invoice_done_list')">
                <img class="icon" :src="imgs.mineOrder" alt="" />
                <div class="label">我的发票</div>
                <div class="input"></div>
                <img class="arrow" src="../src/assets/imgs/arrow.png" alt="" />
            </div>
            <div class="item" @click="logout">
                <img class="icon" :src="imgs.mineLogout" alt="" />
                <div class="label">退出登录</div>
                <div class="input"></div>
                <img class="arrow" src="../src/assets/imgs/arrow.png" alt="" />
            </div>
        </div>
    </div>
</template>
<script>
import HeaderBar from "../src/components/HeaderBar.vue";
const app = getApp();
export default {
    components: {
        HeaderBar,
    },
    data() {
        return {
            imgs: app.globalData.imgs,
            userInfo: {},
        };
    },
    onShareAppMessage() {},
    onShow() {
        this.userInfo = uni.getStorageSync("userInfo") || {};
    },
    methods: {
        toLogin() {
            if (!this.userInfo.phone) {
                uni.showLoading({
                    title: "登录中",
                });
                app.login().then((res) => {
                    if (res.need_bind_phone) {
                        this.link("/pages/login");
                    } else {
                        this.userInfo = res;
                    }
                    uni.hideLoading();
                });
            }
        },
        link(path) {
            uni.navigateTo({
                url: path,
            });
        },
        logout() {
            uni.showModal({
                title: "提示",
                content: "确认退出登录吗",
                success: (res) => {
                    if (res.confirm) {
                        // 清除缓存
                        uni.setStorageSync("isLogout", true); // 记录手动登出，下次进入应用检查该缓存，为true不静默登录
                        uni.removeStorageSync("userInfo");
                        uni.removeStorageSync("token");
                        this.userInfo = {};
                    } else if (res.cancel) {
                        console.log("用户点击取消");
                    }
                },
            });
        },
    },
};
</script>
<style scoped lang="less">
.container {
    min-height: 100vh;
    background-color: #f6f6f6;

    .header {
        font-size: 38rpx;
        line-height: 1;
        font-weight: bold;
        margin-left: 28rpx;
        color: #333;
    }
    .info-container {
        display: flex;
        align-items: center;
        padding: 44rpx 28rpx;
        .avatar {
            flex: none;
            width: 112rpx;
            height: 112rpx;
            border-radius: 50%;
            margin-right: 26rpx;
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            background-image: url("../src/assets/imgs/avatar.png");
        }
        .info {
            display: flex;
            flex-direction: column;
            justify-content: center;
            flex: auto;
            .name {
                color: #333;
                font-size: 36rpx;
                line-height: 48rpx;
                margin-bottom: 12rpx;
            }
            .phone {
                font-size: 24rpx;
                line-height: 32rpx;
                color: #9a9a9a;
            }
        }
    }
    .card {
        border-radius: 24rpx;
        background-color: #fff;
        width: 694rpx;
        box-sizing: border-box;
        padding: 0 28rpx;
        margin: 0 auto 24rpx;
        .item {
            height: 104rpx;
            display: flex;
            align-items: center;
            font-size: 28rpx;
            border-bottom: 2rpx solid #f3f3f3;
            &:last-child {
                border: none;
            }
            .icon {
                flex: none;
                margin-right: 16rpx;
                width: 36rpx;
                height: 36rpx;
            }
            .label {
                width: 50%;
                flex: auto;
            }
            .input {
                width: 50%;
                flex: auto;
            }
        }
    }
    .arrow {
        width: 16rpx;
        height: 28rpx;
        flex: none;
    }
}
</style>
